<template>
  <div class="detail">
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
      <van-swipe-item
      v-for="img in details.photo"
      :key="img.id"
      >
      <img v-lazy="img.url" :style="{ display: 'block',width: '100%'}" />
      </van-swipe-item>
    </van-swipe>

     <div class="title">
      {{details.title}}
    </div>
    <div class="price">
      价格：￥{{details.price | moeny}}
    </div>

    <van-divider>以下是图文详情</van-divider>

    <img
      v-for="imag of details.descContentList"
      :key="imag.image.id"
      :src="imag.image.url"
      :style="{ display: 'block',width: '100%'}"
      alt="" />

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="10" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" @click="Addtocart" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import Vue from 'vue'
import {
  Swipe,
  SwipeItem,
  Lazyload,
  Divider,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton
} from 'vant'
import { getDetail } from '@/api/home'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)
Vue.use(Divider)
Vue.use(GoodsAction)
Vue.use(GoodsActionButton)
Vue.use(GoodsActionIcon)

export default {
  name: 'Detail',
  data () {
    return {
      details: {}
    }
  },
  async created () {
    const res = await getDetail(this.$route.query.id)
    res.detail.descContentList = res.detail.descContentList.filter(item => item.image)
    this.details = res.detail
  },
  methods: {
    Addtocart () {
      const { title, price, id, image } = this.details
      const shopcart = {
        title,
        price,
        id,
        image,
        count: 1
      }
      this.$store.dispatch('addTocart', shopcart)
    }
  }
}
</script>

<style lang="scss" scoped>
  .detail {
    text-align: center;
    .price {
      line-height: 70px;
      color: red;
    }
  }
</style>
